<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1. 引入vue库 -->
  <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 2. 定义一个容器元素 -->
    <div id="app">
      <p>{{ msg }}</p>
    </div>

    <script>
      /* 3. 创建vue实例对象 */
      new Vue({
        /* 
        el: 页面根元素
          写法1: 选择器
          写法2: dom元素
        */
        // el: '#app',
        el: document.getElementById('app'),
        /* 
        data: 定义响应式数据
          写法1: 包含n个属性的对象
          写法2: 返回data对象的函数
        */
        // data: {
        //   msg: 'Hello Vue22!'
        // },
        data () {
          return {
            msg: 'Hello Vue333'
          }
        },
        /* 
        template: 要解析显示的模板页面, 模板页面中可以读取data数据
             html + vue特定语法(插值 + 指令)的字符串
            vue内部会解析模板: 生成虚拟DOM, 接着生成真实DOM显示
        template配置的缺点: 没有补全提示, 没有高亮
        解决: 将模板直接编写在页面el元素中
        */
        // template: `
        //   <div>
        //     <p>{{ msg }}</p>  
        //   </div>
        // `
      })
    </script>
</body>
</html>